<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>术语学习卡片与AI助手</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="main-container">
        <!-- 闪卡学习区域 -->
        <div class="flashcard-area">
            <!-- 错题回顾列表 -->
            <div id="wrongQuestionsListContainer">
                <h4>错题回顾</h4>
                <ul id="wrongQuestionsList">
                    <li class="no-wrong-questions">暂无错题记录</li>
                </ul>
            </div>

            <!-- 主要控制区域 -->
            <div class="container">
                <h1>术语学习卡片</h1>
                
                <!-- 文件控制按钮 -->
                <div class="controls">
                    <input type="file" id="fileInput" accept=".json">
                    <button id="prevButton" disabled>上一个</button>
                    <button id="nextButton" disabled>下一个</button>
                </div>

                <!-- NEW: Search Term Input and Results -->
                <div id="searchTermContainer" style="margin-top: 15px; display: flex; align-items: center; width: 100%; max-width: 450px; margin-left: auto; margin-right: auto;">
                    <input type="text" id="searchTermInput" placeholder="搜索术语..." style="flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; font-size: 0.9em;">
                    <button id="clearSearchButton" title="清除搜索" style="padding: 10px; border: none; background-color: #6c757d; color: white; cursor: pointer; border-radius: 0 4px 4px 0; font-size: 0.9em;">×</button>
                </div>
                <div id="searchResultsContainer" style="width: 100%; max-width: 450px; background-color: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 100; margin-left: auto; margin-right: auto; margin-bottom:10px;">
                    <!-- 搜索结果将在这里填充 -->
                </div>

                <!-- 文件状态显示 -->
                <div id="fileNameDisplay">请选择一个 JSON 文件</div>
                <div id="progressDisplay"></div>

                <!-- 闪卡容器 -->
                <div class="card-container">
                    <div class="card" id="flashcard">
                        <div class="card-face card-front" id="cardFront">
                            请选择文件并开始
                            <button class="send-to-ai-button" id="sendFrontToAiButton" style="display:none;">发送到AI</button>
                        </div>
                        <div class="card-face card-back" id="cardBack">
                            <div id="explanationContent" style="margin-bottom: 15px; max-height: 150px; overflow-y: auto;">解释会在这里</div>
                            <div id="spellingTestSection" style="display: none; text-align: center; padding: 10px; border-top: 1px solid #eee; margin-top: auto;">
                                <label for="spellingInput" style="display: block; margin-bottom: 5px; font-size: 0.95em;">尝试拼写术语:</label>
                                <input type="text" id="spellingInput" style="padding: 6px 8px; border-radius: 4px; border: 1px solid #ccc; font-size: 0.95em; margin-right: 5px; width: 60%;">
                                <button id="checkSpellingButton" style="padding: 6px 12px; font-size: 0.95em; background-color: #17a2b8; color: white; border: none; border-radius: 4px; cursor: pointer;">检查</button>
                                <div id="spellingFeedback" style="margin-top: 8px; font-size: 0.9em; min-height: 1.2em;"></div>
                            </div>
                            <button class="send-to-ai-button" id="sendBackToAiButton" style="display:none;">发送到AI</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ai-chat-area">
            <h2>AI 助手</h2>
            <!-- <div id="apiKeyInputContainer">
                <input type="password" id="apiKeyInput" placeholder="输入您的API密钥">
                <button id="saveApiKeyButton">保存密钥</button>
            </div> -->
            <div id="aiPresetActions" style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;">
                <!-- AI 助手预设操作按钮将在这里 -->
                <button id="generateExampleButton" class="ai-preset-button">生成例句</button>
                <button id="synonymAntonymButton" class="ai-preset-button">同义词/反义词</button>
                <button id="detailedDefinitionButton" class="ai-preset-button">详细解释</button>
                <button id="relatedKnowledgeButton" class="ai-preset-button">相关背景</button>
            </div>
            
            <!-- 聊天历史 -->
            <div id="chatHistory"></div>
            
            <!-- 聊天输入 -->
            <div id="chatInputContainer">
                <input type="text" id="chatInput" placeholder="向AI提问...">
                <button id="sendChatButton">发送</button>
            </div>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="js/flashcards.js"></script>
</body>
</html>
